<template>
  <a-drawer
    :width="400"
    :visible="visible"
    title="租客其他付费项目"
    :maskClosable="true"
    @close="onClose"
  >
    <div class="content">
      <a-row :gutter="[0, 12]">
        <a-col
          :span="24"
          v-for="item of costTypeList"
          :key="item.id"
          @click.prevent="onCostTypeChecked(item.id)"
          class="pointer"
        >
          <a-checkbox :checked="checkedCostType.includes(item.id)">
            {{ item.cost_type_txt }}
          </a-checkbox>
        </a-col>
        <a-col :span="24">
          <a-button type="primary" ghost @click="onAdd">
            <template #icon>
              <PlusOutlined />
            </template>
            新增条款类型
          </a-button>
        </a-col>
      </a-row>
    </div>
    <div class="drawer-footer">
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onSubmit">确定</a-button>
      </a-space>
    </div>

    <AddClauseType
      :visible="addVisible"
      attribute="other"
      @cancel="addVisible = false"
      @success="onAddSuccess"
    />
  </a-drawer>
</template>
<script>
import { defineComponent, watch, reactive, toRefs } from "vue";
import request from "../../../../common/utils/request";
import { PlusOutlined } from "@ant-design/icons-vue";
import AddClauseType from "../../../../views/contract/ClauseType/modules/TypeEdit.vue";

export default defineComponent({
  name: "OtherInfoAdd",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  components: { PlusOutlined, AddClauseType },
  setup(props, { emit }) {
    const state = reactive({
      costTypeList: [],
      checkedCostType: [],
      noCostType: false,

      addVisible: false,
    });

    const onSubmit = () => {
      const list = state.costTypeList.filter((it) =>
        state.checkedCostType.includes(it.id)
      );
      emit("success", {
        checked: list.map((it) => it.cost_type),
      });
    };

    const onCostTypeChecked = (id) => {
      const index = state.checkedCostType.findIndex((it) => it == id);
      if (index == -1) {
        state.checkedCostType.push(id);
      } else {
        state.checkedCostType.splice(index, 1);
      }
    };

    const onAddSuccess = () => {
      getTplCostType();
      state.addVisible = false;
    };

    const onAdd = () => {
      state.addVisible = true;
    };

    const getTplCostType = () => {
      request.get("/org", "/contract/fastClauseList").then((res) => {
        state.costTypeList = res.list;
        state.noCostType = state.costTypeList.length == 0;
      });
    };

    const init = () => {
      getTplCostType();
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          init();
        } else {
          state.checkedCostType = [];
        }
      }
    );

    const onClose = () => {
      emit("cancel");
    };

    return {
      ...toRefs(state),
      onClose,
      onSubmit,
      onAdd,
      onAddSuccess,
      onCostTypeChecked,
    };
  },
});
</script>
